<template>
    <div class="recordItem">
        <img v-if="item.avatar===''" src="@/assets/images/tx.jpg"/>
        <img v-else :src="item.avatar"/>
        <div class="info">
            <div class="headerInfo">
                <span>{{item.sendName}}</span>
                <span>{{item.time}}</span>
            </div>
            <div class="content">
                <!--根据类型展示不同的数据-->
                <TextRecordComponent v-if="item.type===0"/> 
                <ImageRecordComponent v-if="item.type===1"/>
                <VideoRecordComonent v-if="item.type===2"/>
                <VoliceRecordComonent v-if="item.type===3"/>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { provide } from 'vue'
import FileRecordComponent from './FileRecordComponent.vue';
import ImageRecordComponent from './ImageRecordComponent.vue';
import TextRecordComponent from './TextRecordComponent.vue';
import VideoRecordComonent from './VideoRecordComonent.vue';
import VoliceRecordComonent from './VoliceRecordComonent.vue';
const props = defineProps({
    item: {
        type: Object,
        default: ()=>{}
    }
})
provide('item', props.item)
</script>
<style lang="less" scoped>
.recordItem {
    width: 93%;
    margin: 0 auto;
    border-radius: 5px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f7f7f7;
    >img {
        width: 36px;
        border-radius: 2px;
    }
    .info {
        flex: 1;
        .headerInfo {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #676767;
        }
        .content {
            margin-top: 5px;
        }
    }
}
</style>